import React from 'react'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import {actions as AssignActions} from '../../reducers/assign'

import { Toast } from 'antd-mobile'
import {get, post} from '../../axios'
import Rate from '../../components/rate'
import utils from '../../common/utils'
import history from '../../history'

class Assign extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: false,
            users: [],
            showSelectLayer: false,
            selected: this.props.selected
        }
    }

    componentDidMount() {
        let project_id = utils.getQueryString('project_id')
        // console.log(project_id)
    }

    componentDidMount() {
        this.fetchData(' ')
    }

    fetchData = (keyword) => {
        this.setState({isLoading: true})
        get(`mem/search-execute?keyword=${keyword}`).then(
            resp => {
                if (resp.success==true) {
                    this.setState({users: resp.data, isLoading: false})
                }
            }
        )
        this.setState({isLoading: false})
    }

    handChange = (e) => {
        console.log(e.target.value)
        let {isLoading} = this.state
        if (isLoading) return

        this.fetchData(e.target.value)
    }

    handleSelect = (id) => {
        let user = this.state.users.filter(x => x.id == id )
        this.setState({users:[], selected: this.state.selected.concat(user)})
    }

    handleDelete = (id) => {
        this.setState({selected: this.state.selected.filter(x => x.id !== id )})
    }

    assign = () => {
        let project_id = utils.getQueryString('project_id')
        // let data = {ids: this.state.selected.map(x=>x.id)}
        this.props.set_selected(this.state.selected)
        
        history.replace(`/assign?project_id=${project_id}`, { selected: this.state.selected })

    }

    render() {
        return (
            <React.Fragment>
                <div class="distribution">
                    <div class="title">
                        <p>项目执行方</p>
                        <div class="soso"  >
                            <input onChange={this.handChange}/>
                        </div>
                    </div>
                    <div class="soso-list" style={{marginBottom: '75px'}}>
                    {
                         this.state.users[0]?
                         this.state.users.map(x => 
                            <div class="soso-row" key={x.id} 
                                onClick={()=>this.handleSelect(x.id)}
                            >
                                <div class="soso-lt">
                                    <div class="name">{x.nickname}</div>
                                    <div class="grade">
                                        <Rate
                                            value={x.rank}
                                            count={6}
                                            disabled={true}
                                        />
                                    </div>
                                </div>
                                {
                                    this.state.selected.filter(y=>y.id==x.id).map(z=>
                                        <div class="soso-rt" k={`z-${z.id}`}>
                                            <a>已选</a>
                                        </div>
                                    )
                                }
                                
                            </div>
                        ):
                        this.state.selected.map(x => 
                            <div class="soso-row" key={x.id}>
                                <div class="soso-lt">
                                    <div class="name">{x.nickname}</div>
                                    <div class="grade">
                                        <Rate
                                            rank={0}
                                            count={6}
                                            disabled={true}
                                        />
                                    </div>
                                </div>
                                <div class="soso-rt">
                                    <a onClick={()=>this.handleDelete(x.id)}>删除</a>
                                </div>
                            </div>
                        )
                    }
  
                    </div>
                </div>
                <div class="btns">
                    <a onClick={this.assign} class="contact">确定</a>
                </div>
            </React.Fragment>    
        )
    }
}



function mapStateToProps(state) {
    return {
        selected: state.assign.selected,
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
        set_selected: bindActionCreators(AssignActions.set_selected, dispatch)
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Assign)
